<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon.png">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        AntRpc Console
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="/css/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/fontawesome-v5.7.1-all.css">
    <!-- CSS Files -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/now-ui-dashboard.min.css" rel="stylesheet"/>
    <link href="/css/my.css" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->

</head>
<body>
<div class="wrapper ">
    <div th:replace="~{common :: #common-sidebar}"></div>
    <div class="main-panel" id="main-panel">
        <nav id="common-nav" class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
            <div class="container-fluid my-padding-left-top-0">
                <div th:replace="~{common :: #commons-nav-btns}"></div>
                <div class="collapse navbar-collapse justify-content-end w-100" id="navigation">
                    <form style="width: 100%;" action="/">
                        <div class="input-group no-border">
                            <input type="text" name="name" class="form-control" placeholder="Search..."/>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <i class="now-ui-icons ui-1_zoom-bold"></i>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <div class="panel-header panel-header-sm"></div>
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb my-breadcrumb">
                        <li class="breadcrumb-item"><a href="/">服务列表</a></li>
                        <li class="breadcrumb-item">
                            <a th:href="@{'/methods?className=' + ${className}}"
                               th:text="${className}"></a>
                        </li>
                        <li class="breadcrumb-item active" th:text="${fullMethodName}"></li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                测试
                                <span th:text="${className}"></span>
                                #
                                <span th:text="${fullMethodName}"></span>
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="content">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="providers-ul">节点:</label>
                                            <ul class="list-group my-cursor-default" id="providers-ul">
                                                <li th:each="it: ${interfaces}" th:text="${it.appName+'@'+it.host}"
                                                    class="list-group-item"></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label for="arguments">参数:</label>
                                            <textarea class="form-control my-textarea" rows="10"
                                                      id="arguments"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 clearfix">
                                        <button class="btn btn-lg btn-danger float-right"
                                                th:attr="data-className=${className}, data-fullMethodName=${fullMethodName}"
                                                onclick="do_test_invoke(this)">测试
                                        </button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="card">
                                            <div class="card-header">
                                                <h6 class="card-title">执行结果:</h6>
                                            </div>
                                            <div class="card-body">
                                                <pre id="response-body-pre"></pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:insert="js"></div>
<script>
    $(document).ready(function () {
        $("#service_list_li").addClass("active");

        $("#providers-ul").on("click", ".list-group-item", function () {
            $("#providers-ul").find(".list-group-item").each(function () {
                $(this).removeClass("active");
            });
            $(this).addClass("active");
        })
    });

    function do_test_invoke(btn) {
        var className = $(btn).attr("data-className");
        var fullMethodName = $(btn).attr("data-fullMethodName");
        var arguments = $.trim($("#arguments").val());
        var host = $("#providers-ul > li.active").text();
        if (!host) {
            Swal.fire({
                title: "AntRpc Console",
                text: "必须选择一个要测试的节点.",
                buttonsStyling: false,
                confirmButtonClass: "btn btn-info"
            });
            return;
        }
        $.ajax({
            url: "/interface/testInvoke",
            type: "POST",
            dataType: "json",
            data: {
                "provider": host,
                "className": className,
                "methodName": fullMethodName,
                "arguments": arguments
            },
            success: function (response) {
                if (response.code === 2000) {
                    $("#response-body-pre").text(response.data);
                } else {
                    $("#response-body-pre").text(response.message);
                }
            }
        });
    }

</script>
</body>
</html>